<template>
  <scroller class="scroller"
            :show-scrollbar="false">

    <slider class="slide"
            interval="3000"
            auto-play="true">
      <div v-for="(img, index) in advertList"
           :key="index">
        <image class="slide-image"
               resize="stretch"
               :src="img"></image>
      </div>
      <indicator class="indicator"></indicator>
    </slider>

    <text class="insur-add-btn"
          @click="goAdd">我要投保</text>

    <vm-title title="保单管理"
              right-text="更多"
              @rightClick="goMoreMy"></vm-title>

    <text v-for="(insur, index) in insurances"
          :key="index"
          class="insur-text"
          @click="goDetail(insur)">{{insur.fillText}}</text>

    <text v-if="!insurances.length&&!loading"
          class="insur-empty"
          @click="goAdd">暂无保单，去添加 ></text>

    <!--
      <vm-title title="农险政策"
                right-text="更多"
                :hasTopBorder="true"
                :marginTop="true"
                @rightClick="goMoreClass"></vm-title>

      <div class="type-row"
           v-if="insuranceTypes.length">
        <text class="type-text text-muted">品种</text>
        <text class="type-text text-muted">单位保额</text>
        <text class="type-text text-muted">保费费率</text>
        <text class="type-text text-muted">自缴比率</text>
      </div>

      <div class="type-row"
           v-for="(type, index) in insuranceTypes"
           :key="index"
           @click="goClassDetail(type)">
        <text class="type-text">{{type.ins_class_name}}</text>
        <text class="type-text">{{type.ins_amount}}</text>
        <text class="type-text">{{type.ins_fee}}</text>
        <text class="type-text">{{type.self_fee_rate}}%</text>
        <text class="icon type-icon">&#xe6a2;</text>
      </div>
      -->

    <text v-if="!insuranceTypes.length&&!loading"
          class="insur-empty">暂无农险政策</text>

    <!-- <vm-title title="理赔流程"
                :show-arrow="false"
                :margin-top="true"
                :hasTopBorder="true"></vm-title> -->

    <div class="p-3 mt-1 border-y flex-row bg-white align-center">
      <text class="icon text-warning mr-1">&#xe7b6;</text>
      <text>理赔流程</text>
    </div>

    <text class="bg-white p-2 small"> （一） 报案
      被保险人（种植、养殖户）拨打95518报案</text>
    <text class="bg-white p-2 small">（二）理赔受理
      接到报案后，人保当地农信工作人员联系核实，收集事故信息（图片、视频及相关文件等材料）</text>
    <text class="bg-white p-2 small">（三）理赔资料
      （1）主管部门事故证明及相关资料
      （2）索赔申请
      （3）投保人营业执照（个人客户提供投保人身份证）
      （4）银行账户</text>

    <div class="align-center mb-2">
      <image class="credit-logo"
             src="bmlocal://assets/credit/credit_logo_03.png"></image>
      <text class="text-muted text-center">望乡农业、为米科技旗下保险经纪平台</text>
      <text class="text-muted mini text-center">客服电话：0856-5210852</text>
      <text class="text-muted mini text-center mt-1 px-2">本平台仅为互联网保险网络技术辅助服务</text>
      <text class="text-muted mini px-2 text-center">产品提供、销售、收取保费等行为，均由保险公司负责，人保财险铜仁分公司-农险部：0856-5210882</text>
    </div>

  </scroller>
</template>
<script>
import VmTitle from '../../components/vm-title.vue'
import {
  STORAGE_FARM,
  STORAGE_CREDIT_RELATED
} from '../../plugins/constant'

export default {
  components: {
    VmTitle
  },
  props: {},
  data() {
    return {
      advertList: [
        'http://vimi8.oss-cn-shenzhen.aliyuncs.com/chick/2019571202669369zhdqkl.jpg',
        'http://vimi8.oss-cn-shenzhen.aliyuncs.com/chick/20195712135899bmf7rpwz.jpg',
      ],
      farm: {},
      related: {},
      insurances: [],
      loading: true,
      insuranceTypes: []
    }
  },
  computed: {},
  watch: {},
  eros: {
    beforeBackAppear(params) {
      if (params && params.type === 1) {
        this.getInsurance()
      }
    }
  },
  created() {
    this.getFarmInfo()
  },
  methods: {
    getFarmInfo() {
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      this.related = this.$storage.getSync(STORAGE_CREDIT_RELATED) || {}
      this.getInsurance()
      this.getInsuranceType()
    },
    getInsurance() {
      this.$notice.loading.show()
      this.$api.getData({
        server: 'credit',
        table: 'datum_customer_insurance_order',
        params: {
          index: 1,
          size: 3,
          'customer_id.eq': this.farm.id,
          'insurance_order_no.neq': ''
        },
        order: {
          create_time: 'desc'
        },
        empty: false, // 是否过滤params的空值
        errorMsg: '获取保单失败！'
      }).then(res => {
        this.insurances = (res && res.data || []).map(item => {
          item.fillText = `单号：${item.insurance_order_no}, 险种：${item.insurance_class_name}`
          return item
        })
      }).finally(() => {
        this.loading = false
        this.$notice.loading.hide()
      })
    },
    getInsuranceType() {
      this.$api.getData({
        server: 'insurance',
        table: 'insurance_class',
        params: {
          index: 1,
          size: 6
        },
        order: {
          ins_year: 'desc'
        },
        errorMsg: '获取农险政策失败！'
      }).then(res => {
        this.insuranceTypes = (res && res.data || []).map(item => {
          item.ins_amount = this.pureFloat(item.ins_amount)
          item.ins_fee = this.pureFloat(item.ins_fee)
          item.self_fee_rate = this.pureFloat(item.self_fee_rate)
          return item
        })
      })
    },
    pureFloat(num) {
      return Number.parseFloat(num) || ''
    },
    goMoreMy() {
      this.$nav.open({ name: 'serve.insurance.my' })
    },
    goMoreClass() {
      this.$nav.open({ name: 'serve.insurance.class' })
    },
    goClassDetail(row) {
      this.$nav.open({ name: 'serve.insurance.class.detail', params: row })
    },
    goAdd() {
      this.$nav.open({ name: 'serve.insurance.apply' })
    },
    goDetail(row) {
      this.$nav.open({
        name: 'serve.insurance.apply',
        params: { data: row }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.scroller {
  width: 750px;
  flex: 1;
}
.insur-text {
  padding: 20px;
  background-color: #fff;
  font-size: 28px;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.flex-row {
  flex-direction: row;
}
.p-2 {
  padding: 20px;
}
.p-3 {
  padding: 25px;
}
.px-2 {
  padding-left: 20px;
  padding-right: 20px;
}
.mt-1 {
  margin-top: 10px;
}
.mr-1 {
  margin-right: 10px;
}
.mb-2 {
  margin-bottom: 20px;
}
.flex {
  flex: 1;
}
.bg-white {
  background-color: #fff;
}
.text-muted {
  color: #999;
}
.text-warning {
  color: $warning;
}
.text-primary {
  color: $primary;
}
.align-center {
  align-items: center;
}
.small {
  font-size: 28px;
}
.mini {
  font-size: 24px;
}
.text-center {
  text-align: center;
}
.border-y {
  border-top-width: 1px;
  border-top-color: $border-color;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.border-bottom {
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}

.insur-empty {
  padding: 50px;
  color: #999;
  text-align: center;
}
.type-row {
  flex-direction: row;
  background-color: #fff;
  justify-content: center;
  border-bottom-width: 1px;
  border-bottom-color: $border-color-light;
}
.type-text {
  flex: 1;
  font-size: 28px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}
.type-icon {
  color: #999;
  font-size: 24px;
  position: absolute;
  right: 10px;
  top: 25px;
}

.credit-logo {
  width: 80px;
  height: 80px;
  margin-top: 80px;
}

.slide {
  width: 750px;
  height: 300px;
}
.indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background-color: rgba(0, 0, 0, 0);
  item-size: 10px;
  item-color: #eee;
  item-selected-color: $primary;
}
.slide-image {
  width: 750px;
  height: 300px;
}

.insur-add-btn {
  padding: 25px;
  background-color: #fff;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
  margin-bottom: 10px;
  text-align: center;
  color: $primary;
  font-size: 32px;
  font-weight: bold;
}
</style>
